<template>
  <div class="project-div">
    <!-- 查询以及新建功能 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1" @click="uncompletetask">在途项目</el-menu-item>
      <el-menu-item index="2" @click="completetask">已结项项目</el-menu-item>
      <span style="float:right">
        <el-input placeholder="项目名称" style="width: 200px;" class="filter-item" v-model="pagination.pname"></el-input>
        <el-date-picker v-model="pagination.year" type="year" placeholder="选择年" style="width: 150px;"></el-date-picker>

        <el-select placeholder="选择区域" v-model="pagination.area">
          <el-option label="华东" value="华东"></el-option>
          <el-option label="华北" value="华北"></el-option>
          <el-option label="华中" value="华中"></el-option>
        </el-select>

        <el-button class="dalfBut" icon="el-icon-search" @click="selectProject()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="refresh()" plain>重置</el-button>
        <el-button type="primary" class="butT" v-if="saveshow" @click="handleCreate()">新建</el-button>
      </span>
    </el-menu>
    <!-- 查询得到的表体 -->
    <el-table style="width: 100%" row-key="pid" :data="dataList"
              :tree-props="{children:'child',hasChildren:'hasChildren'}"
              v-loading="loading"
    >
      <el-table-column prop="pname" label="项目名称" width="140">
      </el-table-column>
      <el-table-column prop="categoryAction" label="项目类型" align="center" width="100"></el-table-column>
      <el-table-column prop="hoster" label="项目主管" v-if="showwrite" align="center"></el-table-column>
      <el-table-column prop="manager" label="项目经理" v-if="showwrite" align="center"></el-table-column>
      <el-table-column prop="gname" label="项目团队名称" align="center"></el-table-column>
      <el-table-column prop="contractAmount" label="合同额(万)" align="center" width="100"></el-table-column>
      <el-table-column prop="priority" label="重要程度" align="center" width="80"></el-table-column>
      <el-table-column prop="category" label="项目分类" width="80"></el-table-column>
      <el-table-column label="项目进度" align="center" width="140">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.projectProgress"></el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="开始时间" width="160"></el-table-column>
      <el-table-column prop="launchTime" label="上线时间" width="160"></el-table-column>
      <el-table-column label="操作" align="center" v-if="operateshow" width="200">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-success" :title="conclusion" @click="responesChange(scope.row)"
                     size="mini"></el-button>
          <el-button type="primary" icon="el-icon-s-custom" :title="assignGroup"
                     :disabled="scope.row.gname==null?false:true" size="mini"
                     @click="assignedGroup(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-s-order" :title="showdetial" size="mini"
                     @click="jump(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right"
                     :current-page="pagination.currentPage" :page-sizes="pagesizes" :page-size="pagination.pagesize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"
      >
      </el-pagination>
    </div>

    <!-- 团队分配页面-->
    <div>
      <el-dialog title="分配团队" :visible.sync="diialogFormVisible" width="41.5%">
        <el-radio v-for="(item,index) in ganmes" :label="item.gid" :key="index"
                  style="width: 100px;height: 25px;" v-model="checkedGnames">{{ item.gname }}
        </el-radio>
        <div slot="footer" style="border:1px;text-align:right;">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAddGroup()">确定</el-button>
        </div>
      </el-dialog>
    </div>


    <div class="add-form">
      <el-dialog v-if="auths.projectadd!=null" title="新增项目" :visible.sync="dialogFormVisible" width="41.5%">
        <el-form ref="dataAddForm" :model="formData" :inline="true" label-position="right"
                 label-width="100px"
        >
          <el-form-item label="项目名称" prop="pname">
            <el-input placeholder="项目名称" v-model="formData.pname" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="合同金额" prop="contractAmount">
            <el-input placeholder="合同金额" v-model="formData.contractAmount" style="width: 200px"></el-input>
          </el-form-item>
          <br>

          <el-form-item label="项目类型" prop="categoryAction">
            <el-select placeholder="请选择" v-model="formData.categoryAction" style="width: 200px">
              <el-option label="研发项目" value="研发项目"></el-option>
              <el-option label="内部管理" value="内部管理"></el-option>
              <el-option label="合同项目" value="合同项目"></el-option>
              <el-option label="集团项目" value="集团项目"></el-option>
              <el-option label="外包项目" value="外包同目"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目分类" prop="category">
            <el-select placeholder="请选择" v-model="formData.category" style="width: 200px">
              <el-option label="纯研发类" value="纯研发类"></el-option>
              <el-option label="研发实施类" value="研发实施类"></el-option>
              <el-option label="维护类" value="维护类"></el-option>
              <el-option label="复用实施类" value="复用实施类"></el-option>
              <el-option label="工作量结算类" value="工作量结算类"></el-option>
            </el-select>
          </el-form-item>
          <br>

          <el-form-item label="项目团队名称" prop="gid">
            <el-select placeholder="请选择团队名称" @focus="getChoiceList" v-model="formData.gid" style="width: 200px">
              <el-option v-for="item in options"
                         :key="item.gid"
                         :label="item.gname"
                         :value="item.gid"
              >
                {{ item.gname }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="重要程度" prop="priority">
            <el-select placeholder="请选择" v-model="formData.priority" style="width: 200px">
              <el-option label="A+" value="A+"></el-option>
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属区域" prop="area">
            <el-select placeholder="请选择" v-model="formData.area" style="width: 200px">
              <el-option label="华东" value="华东"></el-option>
              <el-option label="华北" value="华北"></el-option>
              <el-option label="华中" value="华中"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目进度" prop="projectProgress">
            <el-input placeholder="项目进度" v-model="formData.projectProgress" style="width: 200px"></el-input>
          </el-form-item>

          <br>

          <el-form-item label="上线时间" prop="launchTime">
            <el-date-picker v-model="formData.launchTime" type="date" placeholder="选择日期" style="width: 200px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开始时间" prop="gmtCreate">
            <el-date-picker v-model="formData.gmtCreate" type="date" placeholder="选择日期" style="width: 200px">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addGroupToProject,
  getProjectList,
  updateProjectByPId,
  getChoiceList,
  serchByParams,
  addProject
} from '@/api/project'

export default {
  data() {

    return {
      auths: '',
      loading:true,
      checked:false,
      judgecomplete:"nocomplete",
      showdetial:'查看详情',
      conclusion:'结项',
      assignGroup:'分配团队',
      normalpid: 0,
      checkedGnames: [],
      ganmes: [],
      ids: [],
      // currentPage: 1,
      searchflag: false,
      dialogFormVisible: false,
      diialogFormVisible: false,
      pagesizes: [5, 10, 20, 50],
      total: 0,
      formData: {
        pname: '',
        contractAmount: '',
        categoryAction: '',
        category: '',
        gid: '',
        priority: '',
        area: '',
        projectProgress: '',
        launchTime: '',
        gmtCreate: ''
      },
      dataList: [],
      options: [],
      value: '',
      activeIndex: '1',
      saveshow: true,
      operateshow: true,
      showwrite: true,
      pagination: {
        currentPage: 1,
        pagesize: 10,
        pname: '',
        area: '',
        year: ''
      }
    }
  },
  created() {
    this.getDataList('nocomplete')
    this.getList()
    this.auths = JSON.parse(getAuths())
  },
  methods: {

    changeCheckList(e) {
      this.$forceUpdate()
    },
    jump(row) {
      this.$router.replace('./detail/' + row.pid)
    },
//提示信息
    changeProjectInfoSuccess(title, message) {
      this.$notify({
        title: title,
        message: message,
        type: 'success',
        duration: 2000
      })
    },

    //当前页面显示数据
    getDataList(flag) {
      let url = '/get/project/list/' + this.pagination.currentPage + '/' + this.pagination.pagesize + '?flag=' + flag
      getProjectList(url).then((res) => {
        this.dataList = res.data.data
        this.total = res.data.total
        this.loading = false
      })
    },

    //查询项目
    selectProject() {
      this.searchflag = true
      let yea = new Date(this.pagination.year).getFullYear()
      let form = {
        projectname: this.pagination.pname,
        year: yea,
        area: this.pagination.area,
        page: this.pagination.currentPage,
        offset: this.pagination.pagesize
      }
      serchByParams(form).then((res => {
        if (res.result == 'SUCCESS' && res.code == 200) {
          this.pagination.currentPage = form.page
          this.pagination.pagesize = form.offset
          this.total = res.data.total
          this.showwrite = false
          this.dataList = res.data.data
        }
      }))
    },

    //清空搜索
    refresh() {
      this.pagination.pname = ''
      this.pagination.year = ''
      this.pagination.area = ''
      this.showwrite = true
      this.searchflag = false
      this.getDataList(this.judgecomplete)
    },

    //清空添加项目内容
    clearFormdata() {
      this.formData.pname = ''
      this.formData.area = ''
      this.formData.category = ''
      this.formData.categoryAction = ''
      this.formData.contractAmount = ''
      this.formData.gid = ''
      this.formData.priority = ''
      this.formData.projectProgress = ''
      this.formData.gmtCreate = ''
      this.formData.launchTime = ''
    },
    //获取下拉框函数
    getChoiceList() {
      let url = '/get/no/group'
      getChoiceList(url).then((res) => {
        this.options = res.data
      })
    },

    //获取团队按钮
    getList() {
      let url = '/get/no/group'
      getChoiceList(url).then((res) => {
        this.$set(res, 'checked', false);
        this.ganmes = res.data
      })

    },

    //响应结项
    responesChange(row) {
      if (row.projectProgress != 100) {
        this.$confirm('进度尚未满确认结项吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 这里发送请求
          let url = 'udt/by/' + row.pid
          updateProjectByPId(url).then(res => {
            if (res.result === 'SUCCESS' && res.code == 200) {
              this.$message({ type: 'success', message: '结项成功!' })
              this.getDataList('nocomplete')// 重新加载数据
              this.showwrite = true
            } else {
              this.$message({ type: 'info', message: '结项失败!' })
            }
          })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消结项'
            })
          })
      } else {
        this.$confirm('进度已满确认结项', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 这里发送请求
          let url = 'udt/by/' + row.pid
          updateProjectByPId(url).then(res => {
            if (res.result === 'SUCCESS' && res.code == 200) {
              this.$message({ type: 'success', message: '结项成功!' })
              this.getDataList('nocomplete') // 重新加载数据
            } else {
              this.$message({ type: 'info', message: '结项失败!' })
            }
          })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消结项'
            })
          })
      }
    },

    //分配团队
    assignedGroup(row) {
      this.diialogFormVisible = true
      this.getList()
      this.normalpid = row.pid
    },

    //未结项
    uncompletetask() {
      this.loading = true
      this.judgecomplete='nocomplete'
      this.getDataList(this.judgecomplete)
      this.saveshow = true
      this.operateshow = true
    },

    //结项
    completetask() {
      this.loading = true
      this.judgecomplete='complete'
      this.getDataList(this.judgecomplete)
      this.saveshow = false
      this.operateshow = false
    },

    //页面条数改变
    handleSizeChange(val) {
      this.pagination.pagesize = val
      if (this.searchflag) {
        this.pagination.pagesize = val
        this.selectProject()
        return
      }
      this.getDataList(this.judgecomplete)
    },

    //页面改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      if (this.searchflag) {
        this.pagination.currentPage = val
        this.selectProject()
        return
      }
      this.getDataList(this.judgecomplete)
    },

    //响应添加页面
    handleCreate() {
      this.dialogFormVisible = true
    },

    //响应取消
    cancel() {
      this.dialogFormVisible = false
      this.diialogFormVisible = false
      this.$message.info('当前操作取消')
    },

    //添加项目
    handleAdd() {
      console.log(this.formData.gid)
      this.$refs.dataAddForm.validate((valid) => {
        if (valid) {
          addProject(this.formData).then((res) => {
            this.dialogFormVisible = false
            if (res.result === 'SUCCESS' && res.code == 200) {
              this.$message({ type: 'success', message: '添加项目成功!' })
              this.getDataList('nocomplete') // 重新加载数据
              this.clearFormdata()
            } else {
              this.$message({ type: 'info', message: '添加项目失败!' })
            }
          })
        } else {
          this.$message.error('请完善表单信息！')
          return false
        }
      })
    },

    //分配团队事件
    handleAddGroup() {
      let url = '/select/project/group?pid=' + this.normalpid + '&' + 'gid=' + this.checkedGnames
      addGroupToProject(url).then((res) => {
        this.diialogFormVisible = false
        console.log(res)
        if (res.code != 200) {
          return this.changeProjectInfoSuccess('失败', '添加团队失败！')
        } else {
          this.changeProjectInfoSuccess('成功', '添加团队成功！')
          this.getDataList('nocomplete')
        }
      })
    }
  }

}
</script>

<style>
.project-div {
  padding-top: 40px;
  padding-left: 40px;
}
</style>
